<template>
  <div
    :class="{ player__box: true, hidePlayer: isshow, showPlayer: isshow2 }"
    @mouseenter.stop.self="playerMouseover()"
    @mouseleave.stop.self="playerMouseOut()"
  >
    <div class="left__bg"></div>
    <div class="right__bg"></div>
  </div>
</template>

<script>
export default {
  name: 'Player',
  data() {
    return {
      isshow: false,
      isshow2: false,
    }
  },
  methods: {
    playerMouseover() {
      // 开始显示
      this.isshow2 = true
      this.isshow = false
    },
    playerMouseOut() {
      this.isshow2 = false
      this.isshow = true
    },
  },
}
</script>

<style scoped lang="less">
.player__box {
  position: fixed;
  z-index: 1000;
  height: 65px;
  width: 100%;
  bottom: 0px;
  display: flex;
}
.hidePlayer {
  animation: hd 1 0.5s linear forwards;
  animation-delay:0.5s;
}
.showPlayer {
  animation: hd1 1 0.1s linear forwards;
}
@keyframes hd {
  0% {
    bottom: 0;
  }
  100% {
    bottom: -60px;
  }
}

@keyframes hd1 {
  0% {
    bottom: -60px;
  }
  100% {
    bottom: 0;
  }
}

.left__bg {
  height: 63px;
  width: 100%;
  background: url('../assets/img/player.png');
  margin-top: 13px;
}

.right__bg {
  width: 3.6%;
  height: 63px;
  background: url('../assets/img/player.png');
  background-position: 0 -385px;
  margin-top: 3px;
}

.right__bg::after {
  content: '';
  width: 20px;
  height: 20px;
  background: url('../assets/img/player.png');
  background-position: -77px -396px;
  position: absolute;
  top: 3px;
  right: 32px;
  cursor: pointer;
}
</style>